<div>
  <div class="col-12">
    <div class="centerBlock">
      <span class="text-primary text-center"><h2>demo panel</h2></span>
      <p class="text-muted text-center">demo of chromely angular 2+ integration</p>
    </div>
  </div>

  <div class="col-12">
    <div>
      <button type="button" class="btn btn-link" (click)="goBack()">Back</button>
    </div>
    <div class="centerBlock">
      <button type="button" class="btn btn-light" data-toggle="modal" data-target="#boundJsObjectModal" style='margin: 5px;'>RegisterAsyncJsObject Demo</button>
      <button type="button" class="btn btn-light" data-toggle="modal" data-target="#httpModal" style='margin: 5px;'>Http Demo</button>
      <a href="https://github.com/mattkol/Chromely" class="btn btn-default" role="button" style='margin: 5px;'>more info</a>
    </div>
  </div>

  <br>

  <div id="infoPanel" class="col-12 centerBlock">

    <div>
      <div class="card-header card bg-primary text-white">Chromely Main objective</div>
      <div class="card-body"> {{ info.objective }} </div>
    </div>
    <br>

    <div>
      <div class="card-header card bg-primary text-white">Platforms</div>
      <div class="card-body"> {{ info.platform }}</div>
    </div>
    <br>

    <div>
      <div class="card-header card bg-primary text-white">Current CefSharp/Chromium Version</div>
      <div class="card-body">{{ info.version }}</div>
    </div>
    <br>

  </div>

  <!-- The Modal RegisterAsyncJsObject Modal -->
  <div class="modal fade" id="boundJsObjectModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">.NET/JavaScript Integration Demo (RegisterAsyncJsObject)</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <!-- Nav pills -->
          <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="pill" href="#sectionA">Get 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="pill" href="#sectionB">Get 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="pill" href="#sectionC">Post</a>
            </li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div id="sectionA" class="container tab-pane active">
              <br>
              <div class="row">
                <div class="col-12">
                  Route Path:&ensp;/democontroller/movies &ensp; (Restful Service in Local Assembly)&ensp;<button type="button" class="btn btn-primary btn-sm" (click)="regsiteredJSObjectRequests('getlocal', '/democontroller/movies')">Run</button>
                </div>
                <br><br>
                <div class="col-12">
                  <div class='table-responsive'>
                    <table class='table'>
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Title</th>
                          <th>Year</th>
                          <th>Votes</th>
                          <th>Rating</th>
                          <th>Date</th>
                          <th>RestfulAssembly</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor='let movie of moviesCefQueryLocalAssembly'>
                          <td>{{ movie.Id }}</td>
                          <td>{{ movie.Title }}</td>
                          <td>{{ movie.Year }}</td>
                          <td>{{ movie.Votes }}</td>
                          <td>{{ movie.Rating }}</td>
                          <td>{{ movie.Date }}</td>
                          <td>{{ movie.RestfulAssembly }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div id="sectionB" class="container tab-pane fade">
              <br>
              <div class="row">
                <div class="col-12">
                  Route Path:&ensp;/externalcontroller/movies &ensp;(Restful Service in External Assembly)&ensp;<button type="button" class="btn btn-primary btn-sm" (click)="regsiteredJSObjectRequests('getexternal', '/externalcontroller/movies')">Run</button>
                </div>
                <br><br>
                <div class="col-12">
                  <div class='table-responsive'>
                    <table class='table'>
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Title</th>
                          <th>Year</th>
                          <th>Votes</th>
                          <th>Rating</th>
                          <th>Date</th>
                          <th>RestfulAssembly</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor='let movie of moviesCefQueryExternalAssembly'>
                          <td>{{ movie.Id }}</td>
                          <td>{{ movie.Title }}</td>
                          <td>{{ movie.Year }}</td>
                          <td>{{ movie.Votes }}</td>
                          <td>{{ movie.Rating }}</td>
                          <td>{{ movie.Date }}</td>
                          <td>{{ movie.RestfulAssembly }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div id="sectionC" class="container tab-pane fade">
              <br>
              <div class="row">
                <div class="col-12">
                  Route Path:&ensp;/democontroller/savemovies&ensp;(Restful Service in Local Assembly)&ensp;<button type="button" class="btn btn-primary btn-sm" (click)="regsiteredJSObjectRequests('post', '/democontroller/savemovies')">Run</button>
                </div>
                <br><br>
                <div class="col-12">
                  <div>{{ postCefQueryResult }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>

  <!-- The Modal Http Requests -->
  <div class="modal fade" id="httpModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Http Requests</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <!-- Nav pills -->
          <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="pill" href="#sectionI">Get 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="pill" href="#sectionJ">Get 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="pill" href="#sectionK">Post</a>
            </li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div id="sectionI" class="container tab-pane active">
              <br>
              <div class="row">
                <div class="col-12">
                  Route Path:&ensp;/democontroller/movies &ensp; (Restful Service in Local Assembly&ensp;<button type="button" class="btn btn-primary btn-sm" (click)="httpRequest('getlocal', 'http://chromely.com/democontroller/movies')">Run</button>
                </div>
                <br><br>
                <div class="col-12">
                  <div class='table-responsive'>
                    <table class='table'>
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Title</th>
                          <th>Year</th>
                          <th>Votes</th>
                          <th>Rating</th>
                          <th>Date</th>
                          <th>RestfulAssembly</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor='let movie of moviesHttpLocalAssembly'>
                          <td>{{ movie.Id }}</td>
                          <td>{{ movie.Title }}</td>
                          <td>{{ movie.Year }}</td>
                          <td>{{ movie.Votes }}</td>
                          <td>{{ movie.Rating }}</td>
                          <td>{{ movie.Date }}</td>
                          <td>{{ movie.RestfulAssembly }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div id="sectionJ" class="container tab-pane fade">
              <br>
              <div class="row">
                <div class="col-12">
                  Route Path:&ensp;/externalcontroller/movies &ensp; (Restful Service in External Assembly)&ensp;<button type="button" class="btn btn-primary btn-sm" (click)="httpRequest('getexternal', 'http://chromely.com/externalcontroller/movies')">Run</button>
                </div>
                <br><br>
                <div class="col-12">
                  <div class='table-responsive'>
                    <table class='table'>
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Title</th>
                          <th>Year</th>
                          <th>Votes</th>
                          <th>Rating</th>
                          <th>Date</th>
                          <th>RestfulAssembly</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor='let movie of moviesHttpExternalAssembly'>
                          <td>{{ movie.Id }}</td>
                          <td>{{ movie.Title }}</td>
                          <td>{{ movie.Year }}</td>
                          <td>{{ movie.Votes }}</td>
                          <td>{{ movie.Rating }}</td>
                          <td>{{ movie.Date }}</td>
                          <td>{{ movie.RestfulAssembly }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div id="sectionK" class="container tab-pane fade">
              <br>
              <div class="row">
                <div class="col-12">
                  Route Path:&ensp;/democontroller/savemovies &ensp;(Restful Service in Local Assembly)&ensp;<button type="button" class="btn btn-primary btn-sm" (click)="httpRequest('post', 'http://chromely.com/democontroller/savemovies')">Run</button>
                </div>
                <br><br>
                <div class="col-12">
                  <div>{{ postHttpResult }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>

</div>
